<template>
  <view class="content">
    <view class="top">
      <button class="router-link-active" @click="goback">
        <返回</button>
          <view class="time"> 夜之慕 {{shopname}}组局实况 {{ formattedDateTime }} </view>
          <button class="abox" @click="mode">切换</button>
    </view>
    <view class="main">

      <view class="left shinebox" :style="{'height':boxheight+'px'}">
        <shop v-if="loops==0" :shopid="shopid" :pptv="pptv" @func="increment"></shop>
        <ads v-else :shopid="shopid" :pptv="pptv" @func="increment"></ads>

      </view>
      <view class="right shinebox" :style="{'height':boxheight+'px'}">
        <view class="listth">
          <view class="th" :class="{ cur: loop === k }" v-for="(v, k) in navi" :key="k">
            {{ v }}
          </view>
        </view>
        <view v-if="loop === 0">
          <dm :shopid="shopid" :pptv="pptv"></dm>
        </view>
        <view v-else-if="loop === 1">
          <player :shopid="shopid" :pptv="pptv"></player>
        </view>
        <view v-else>
          <dmpraise :shopid="shopid" :pptv="pptv"></dmpraise>
        </view>
      </view>
    </view>
    <view class="abottom shinebox">
      <liuarticle :shopid="shopid"></liuarticle>
    </view>
  </view>
</template>

<script>
  import shop from '../../components/shop.vue'
  import dm from '../../components/dm.vue'
  import liuarticle from '../../components/liuarticle.vue'
  import player from '../../components/player.vue'
  import dmpraise from '../../components/dmpraise.vue'
  import ads from '../../components/ads.vue'
  export default {
    data() {
      return {
        formattedDateTime: "",
        timer: null,
        loop: 0,
        loops: 0,
        boxheight: 370,
        pptv: 0,
        timelen: 20000,
        shopname: '',
        navi: [],
        shopid: 0
      };
    },
    components: {
      shop,
      dm,
      liuarticle,
      player,
      dmpraise,
      ads
    },
    onLoad({
      id
    }) {
      this.shopid = id
      this.getShopname()
      this.updateClock();
      this.getNav()
      this.timer = setInterval(() => {
        this.updateClock();

      }, 1000);

    },
    mounted() {
      this.setboxheight()
      this.compswitch()
    },
    beforeDestroy() {
      clearInterval(this.timer);
    },

    methods: {
      getNav() {
        this.$http({
          url: `/bigscreen/rightnavi_new`,
          data: {
            shop: this.shopid
          },
          method: 'post'
        }).then(response => {
          this.navi = response.list
        }).catch(error => {
          console.log(error)
        })
      },
      goback() {
        uni.navigateTo({
          url: `/pages/index/index`
        })

      },
      updateClock() {
        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const day = now.getDate();
        const hours = now.getHours();
        const minutes = now.getMinutes();
        const seconds = now.getSeconds();

        const formattedDate = `${year}-${month}-${day}`;
        const formattedTime = `${hours.toString().padStart(2, "0")}:${minutes
        .toString()
        .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;

        this.formattedDateTime = `${formattedDate}     ${formattedTime}`;
      },
      setboxheight() {

        // eslint-disable-next-line eqeqeq
        if (this.pptv == 1) {
          this.boxheight = 530
        } else {
          this.boxheight = 370
        }
      },
      compswitch() {
        setInterval(() => {
          if (this.loop == 0) {
            this.loop = 1
          } else if (this.loop == 1) {
            this.loop = 2
          } else {
            this.loop = 0
          }

          if (this.loops < 1) {
            this.loops++
          } else {
            this.loops--
          }
          
        }, 20000)
      },
      increment(e) {
        this.timelen = parseInt(e)
      },
      mode() {
        // this.$store.commit('setpptv')
        this.pptv = 1 ^ this.pptv
        this.setboxheight()
      },

      getShopname() {
        this.$http({
          url: `/bigscreen/shopname`,
          data: {
            shop: this.shopid
          },
          method: 'post'
        }).then(response => {
          this.shopname = response.shopname

          // this.pptv = response.data.pptv
        }).catch(error => {
          console.log(error)
        })
      },
    },
  };
</script>

<style lang="less">
  page {
    background-color: #0e202c;
  }

  view {
    color: #fff;
  }

  .content {
    .top {
      display: flex;
      justify-content: space-between;
      margin: 10px 0;

      .router-link-active {
        width: 70px;
        display: block;
        text-decoration: none;
        border: 1px solid #eee;
        background-color: #173549;
        border-radius: 4px;
        margin-left: 10px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: white;
        font-size: 14px;
      }

      .router-link-active:hover {
        background-color: #bdf;
        color: #173549;
      }

      .abox {
        width: 70px;
        border: 1px solid #eee;
        background-color: #173549;
        border-radius: 4px;
        margin-right: 10px;
        height: 30px;
        text-align: center;
        line-height: 30px;
        color: white;
        font-size: 14px;
        cursor: pointer;
        // display: flex;
        // justify-content: flex-end;
      }

      .time {
        color: #fff;
        font-weight: bold;
        font-size: 20px;
      }
    }
  }

  .main {
    display: flex;
    justify-content: space-between;
    align-items: stretch;

    .left {
      flex: 2;
    }

    .right {
      flex: 1;

      .listth {
        width: 100%;
        height: 50px;

        display: flex;
        justify-content: space-between;

        .th {
          flex: 1;
          text-align: center;
          height: 50px;
          line-height: 50px;
          background-color: rgba(23, 53, 73, 0.9);
          border-right: 1px solid #444;
          border-bottom: 1px solid #444;
        }

        .cur {
          background-color: transparent;
          border-bottom: none;
        }
      }
    }
  }

  .abottom {
    padding: 5px 6px;
    margin: 16px 8px !important;
  }

  .shinebox {
    margin: 0 7px 0 8px;
    box-shadow: 0 0 8px #fff;
    border-radius: 8px;
    overflow: hidden;
  }

  .shinebox:last-child {
    margin: 0 8px 0 7px;
  }
</style>